<template>
    <div class="layer-view">
        <div class="layer-wrap">
            <el-select class="main-mas-input-simple main-mas-input-simple-input layer-select" v-model="elementTypeList" multiple collapse-tags clearable placeholder="组件类型" @change="elementChange">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select class="main-mas-input-simple main-mas-input-simple-input layer-select" :popper-append-to-body="false" v-model="pageNameList" multiple collapse-tags placeholder="页面名称" clearable @change="elementChange">
                <el-option v-for="(item, index) in pageList" :key="index" :label="item.name" :value="item.name"></el-option>
            </el-select>
        </div>
        <p v-if="searchElementList.length" class="sort-view">
            <span>查询到 {{ searchElementList.length }} 个组件</span>
        </p>
        <p v-else-if="(elementTypeList.length || pageNameList.length) && !searchElementList.length" class="sort-view">
            没有符合条件的组件!
        </p>
        <p v-else class="sort-view">选择条件进行查询</p>
        <draggable class="element-warp" v-model="elementSortList" @update="dragEndSort">
            <transition-group>
                <div v-for="(item, index) in elementSortList" :key="index" @click="activeElement(item)" :class="currentElementList.indexOf(item) !== -1 ? 'layer-item active-item' : 'layer-item'" :style="{ 'opacity': !item.attribute.visible ? '0.5' : '1' }" @mouseenter="item.attribute.highlight = true;" @mouseleave="item.attribute.highlight = false;">
                    <p :class="elementTypeList.length && pageNameList.length
                        ? elementTypeList.indexOf(item.component) !== -1 &&
                            pageNameList.indexOf(pageList[item.attribute.page].name) !== -1 ? 'search nowrap' : 'nowrap'
                        : elementTypeList.indexOf(item.component) !== -1 ||
                            pageNameList.indexOf(pageList[item.attribute.page].name) !== -1 ? 'search nowrap' : 'nowrap'
                        ">
                        {{ index + 1 }}.&nbsp;&nbsp;{{ elementNameConfig[item.component] ? elementNameConfig[item.component].label : item.component }}
                    </p>
                    <p v-if="active != index" :class=" elementTypeList.length && pageNameList.length
                        ? elementTypeList.indexOf(item.component) !==  -1 &&
                            pageNameList.indexOf(pageList[item.attribute.page].name) !== -1 ? 'search small-ipt nowrap' : 'small-ipt nowrap'
                        : elementTypeList.indexOf(item.component) !== -1 ||
                            pageNameList.indexOf(pageList[item.attribute.page].name) !== -1 ? 'search small-ipt nowrap' : 'small-ipt nowrap'
                        ">
                        {{ pageList[item.attribute.page].name }}
                    </p>
                    <el-select class="main-mas-input-simple main-mas-input-simple-input layer-select" v-model="item.attribute.page" v-else>
                        <el-option v-for="(item, index) in pageList" :key="index" :label="item.name" :value="index"></el-option>
                    </el-select>
                    <div class="action-icon" v-if="active != index">
                        <i class="el-icon-view" v-if="elementShow(item)" @click="elementVisible(item)" title="隐藏"></i>
                        <i class="el-icon-view layer-disable" v-else @click="elementVisible(item)" title="显示"></i>
                        <i class="el-icon-delete" @click="deleteElement(index)" title="删除"></i>
                        <i class="el-icon-edit" @click="active = index" title="编辑"></i>
                    </div>
                    <div class="action-icon" v-else>
                        <i class="el-icon-check" @click="updateElemenet(item)" title="确定"></i>
                        <i class="el-icon-close" @click="active = -1" title="关闭"></i>
                    </div>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>
<script>
import draggable from 'vuedraggable';
import store from '@/js/store/state.js';
import elementNameConfig from '@/js/element/elementName.js';
import history from '@/js/main/history.js';
import message from '@/js/util/message.js';

export default {
    data() {
        return {
            window: window,
            elementSortList: store.getElementSortList(),
            pageList: store.getPageList(),
            currentElementList: store.getCurrentElementList(),
            typeList: [],
            elementTypeList: [],
            pageNameList: [],
            active: -1,
            searchElementList: [],
            selectPageList: [],
            elementNameConfig: elementNameConfig,
            ctrlElementList: []
        };
    },
    components: {
        draggable
    },
    watch: {
        elementSortList(val) {
            this.getElementTypeList();
        },
        deep: true
    },
    methods: {
        getElementTypeList() {
            let options = {};
            this.typeList = [];
            this.elementSortList.forEach((item) => {
                if (!options[item.component]) {
                    options[item.component] = {
                        label: this.elementNameConfig[item.component] ? this.elementNameConfig[item.component].label : '未知类型',
                        value: item.component
                    };
                    this.typeList.push(options[item.component]);
                }
            });
            let elementTypeList = [];
            this.typeList.forEach((item) => {
                if (this.elementTypeList.indexOf(item.label) !== -1) {
                    elementTypeList.push(item.label);
                }
            });
            this.elementTypeList = elementTypeList;
            this.elementChange();
        },
        elementChange() {
            this.searchElementList = [];
            if (!this.pageNameList.length && this.elementTypeList.length) {
                this.elementSortList.forEach((item) => {
                    if (this.elementTypeList.indexOf(item.component) !== -1) {
                        this.searchElementList.push(item.name);
                    }
                });
            }
            if (this.pageNameList.length && !this.elementTypeList.length) {
                this.elementSortList.forEach((item) => {
                    if (this.pageNameList.indexOf(this.pageList[item.attribute.page].name) !== -1) {
                        this.searchElementList.push(item.name);
                    }
                });
            }
            if (this.pageNameList.length && this.elementTypeList.length) {
                let arr = this.elementTypeList.concat(this.pageNameList);
                this.elementSortList.forEach((item) => {
                    if (arr.indexOf(item.component) !== -1 && arr.indexOf(this.pageList[item.attribute.page].name) !== -1) {
                        this.searchElementList.push(item.name);
                    }
                });
            }
        },
        deleteElement(index) {
            let _this = this;
            message.confirm(
                '是否删除该组件',
                '',
                function() {
                    store.removeElement(_this.elementSortList[index]);
                    history.addHistory(store.clone(), 6);
                },
                function() {
                    message.message('已取消删除！', 'info');
                }
            );
        },
        activeElement(row) {
            store.setCurrentElementList([row]);
        },
        dragEndSort(evt) {
            // 这个解决方案不是特别好，需要更换
            let oldIndex = evt.oldIndex;
            let newIndex = evt.newIndex;
            store.moveElementSort(oldIndex, newIndex);
            this.elementSortList = store.getElementSortList();
            store.sortElementList();
            history.addHistory(store.clone(), 7);
        },
        updateElemenet(row) {
            this.active = -1;
            store.setCurrentElementList([row]);
            history.addHistory(store.clone(), 8);
        },
        elementShow(item) {
            let visible = true;
            if (!item.attribute.hasOwnProperty('visible')) {
                visible = true;
                this.$set(item.attribute, 'visible', true);
            } else {
                visible = item.attribute.visible;
            }
            return visible;
        },
        elementVisible(item) {
            item.attribute.visible = !item.attribute.visible;
        }
    }
};
</script>
<style lang='scss' scoped>
.layer-view {
    padding: 0 0 0 12px;
    overflow: hidden;
    overflow: visible;
    .layer-item {
        margin-bottom: 4px;
        padding: 0 10px 0 15px;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        &:hover {
            background: #2d2d2d;
        }
        .show-icon {
            visibility: visible;
        }
        .action-icon {
            width: 50px;
            display: flex;
            .el-icon-view,
            .el-icon-delete,
            .el-icon-edit {
                display: block;
                margin: 0 4px;
                cursor: pointer;
                visibility: hidden;
            }
            .el-icon-check,
            .el-icon-close {
                display: block;
                margin: 0 4px;
                cursor: pointer;
            }
        }
        &:hover .el-icon-delete {
            visibility: visible;
        }
        &:hover .el-icon-edit {
            visibility: visible;
        }
        &:hover .el-icon-view {
            visibility: visible;
        }
    }
    .active-item {
        background: #3662ec4d;
        font-weight: 600;
        &:hover {
            background: #3662ec4d;
        }
    }
    .element-warp {
        height: calc(100vh - 445px);
        overflow-y: auto;
    }
}
.layer-disable {
    color: #666666;
}
.layer-wrap {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.layer-select {
    width: 105px;
    overflow: visible;
    ::v-deep .el-select-dropdown {
        // max-width: 600px;
    }
    ::v-deep .el-input__inner {
        height: 30px;
        background: #ffffff0f;
        border: 0 none;
        font-size: 12px;
        color: $FontWhite;
        font-weight: 600;
        &::placeholder {
            color: $FontWhite;
            font-size: 12px;
        }
    }
    ::v-deep .el-input__icon {
        line-height: 30px;
    }
}
.layer-readonly-input {
    background: transparent;
    height: 100%;
    padding-left: 20px;
}
.layer-readonly-input-edit {
    height: 90%;
    padding-left: 20px;
    background: $BackGroundColor;
    border-radius: 4px;
}
.mini-ipt {
    width: 30px;
    padding: 0 4px;
    text-align: center;
}
.sort-view {
    height: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    color: #ffffff80;
    font-size: 12px;
    font-weight: 600;
    .el-icon-top,
    .el-icon-bottom {
        font-size: 14px;
        cursor: pointer;
        margin: 0 0 0 4px;
    }
}
.search {
    color: #9ceefd;
}
::v-deep .el-tag.el-tag--info {
    background: transparent;
    border-color: transparent;
    color: $FontWhite;
}
::v-deep .el-tag.el-tag--info .el-tag__close {
    color: #212121;
}
::v-deep .el-select .el-select__tags > span {
    display: flex;
    overflow: hidden;
}
.small-ipt {
    width: 65px;
    font-weight: normal;
}
::v-deep .main-mas-basis-select {
    background: #212121;
    height: 28px;
}
.nowrap {
    height: 100%;
    line-height: 30px;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>